<template>
  <div class="user-management">
    <div class="search-and-button">
      <el-input
        placeholder="请输入要搜索的用户名"
        class="search-input"
      >
      </el-input>
    </div>

    <el-table :data="store" border stripe class="user-table">
      <el-table-column prop="gid" label="编号" align="center"></el-table-column>
      <el-table-column prop="Images" label="图片">
                <template #default="{ row }">
                    <el-image style="width: 80px; height: 80px;border: solid 1px #ddd;" :src="imgbase + row.GoodsImages"></el-image>
                </template>
            </el-table-column>
      <el-table-column prop="GoodsName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="GoodsPrice" label="商品价格" align="center"></el-table-column>
      <el-table-column prop="OrderType" label="订单类型" align="center"></el-table-column>
      <el-table-column prop="StateName" label="订单状态" align="center"></el-table-column>
      <!-- <el-table-column prop="OrderTime" label="下单时间" align="center"></el-table-column> -->
      <el-table-column prop="OrderTime" label="下单时间" align="center">
          <template #default="{ row }">
            {{ row.OrderTime | DataTime }}
          </template>
        </el-table-column>
      <el-table-column prop="Remark" label="备注" align="center"></el-table-column>
      <el-table-column prop="Uname" label="用户名" align="center"></el-table-column>
      <el-table-column prop="Phone" label="电话" align="center"></el-table-column>
      <el-table-column prop="Aname" label="收货地址" align="center"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="size"
      :page-sizes="[5, 10, 20, 30, 40]"
      :total="count"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import basepath from '@/plugins/base.js'

import axios from 'axios';

export default {
  name: 'UserManagement',
  imgbase:'',
  data() {
    return {
      count: 0,
      size: 5,
      page: 1,
      store: [], // 查询结果
    };
  },
  created() {
    this.imgbase = basepath.imgUrl;

    this.select();
  },
  filters: {
    DataTime(value) {
      // 分割日期和时间部分
      const [datePart, timePart] = value.split('T');
      const [year, month, day] = datePart.split('-');
      const [hours, minutes, secondsWithMs] = timePart.split(':');
      const seconds = secondsWithMs.split('.')[0]; // 去除毫秒部分

      // 直接拼接结果（无需补零，原字符串已补零）
      const result = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return result;
    }
  },
  methods: {
    // 初始化数据
    select() {
      axios({
        method: 'get',
        url: 'http://localhost:21371/Api/order/Page',
        params: { page: this.page, limit: this.size},
      })
        .then((res) => {
          this.count = res.data.count;
          this.store = res.data.data;
        })
        .catch((err) => {
          console.error('error:', err);
        });
    },
    // 分页大小改变时的处理
    handleSizeChange(newSize) {
      this.size = newSize;
      this.page = 1; // 改变分页大小时，通常会将当前页码重置为 1
      this.select(); // 重新查询
    },
    // 当前页改变时的处理
    handleCurrentChange(newPage) {
      this.page = newPage;
      this.select(); // 重新查询
    },
  },
};
</script>

<style scoped>
.user-management {
  padding: 20px;
  /* min-height: 100vh; */
}

.search-and-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
  border-radius: 4px;
  margin-right: 10px;
}

.user-table {
  width: 100%;
  margin-top: 15px;
}

.user-table th,
.user-table td {
  text-align: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
